const path = require('path');
const {merge} = require('webpack-merge');
// const 

const baseConfig = require('./webpack.base.conf');

const cssUse = [
  'style-loader',
  'css-loader',
  {
    loader: 'postcss-loader',
    options: {
      postcssOptions: {
        // 配置要使用的插件
        plugins: [
          'postcss-preset-env'
        ]
      }
    }
  }
]

const devConfig = merge(baseConfig, {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: cssUse
      },
      {
        test: /\.less$/,
        use: [
          ...cssUse,
          'less-loader'
        ]
      }
    ]
  },
  devServer: {
    // contentBase: path.resolve(__dirname, '../dist'),
    compress: true,
    // 开启hmr
    hot: true,
    host: 'localhost',
    port: 3000,
    open: true
  },
  target: "web",
  mode: 'development'
})

module.exports = devConfig;
